<template>
  <div class="fly-panel fly-column">
    <div class="layui-container">
      <ul>
        <router-link class="layui-hide-xs" tag="li" to="/">
          <a href="javascript:void(0);">首页</a>
        </router-link>
        <router-link v-for="(item, index) in list" :key="'panel' + index" tag="li" :to="item.path">
          <a href="javascript:void(0);">
            {{item.name}}
            <span v-if="item.isNew" class="layui-badge-dot"></span>
          </a>
        </router-link>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="line"></span></li>
        <li v-if="isLogin" class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="">我发表的帖</a></li>
        <li v-if="isLogin" class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="">我收藏的帖</a></li>
      </ul>
      <div class="layui-hide-xs right">
        <i class="layui-icon layui-icon-search"></i>
        <button class="layui-btn">发表新帖</button>
      </div>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Panel',
  data () {
    return {
      list: [
        {
          name: '提问',
          path: '/index/ask'
        },
        {
          name: '分享',
          path: '/index/share',
          isNew: true
        },
        {
          name: '讨论',
          path: '/index/discuss'
        },
        {
          name: '建议',
          path: '/index/advise'
        },
        {
          name: '公告',
          path: '/index/notice'
        },
        {
          name: '动态',
          path: '/index/logs'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.isLogin
    })
  }
}
</script>

<style lang="scss" scoped>
  @media (max-width: 768px) {
    .fly-panel {
      height: auto!important;
    }
    ul {
      li {
        width: 33.3%;
      }
    }
  }
  .fly-panel {
    position: relative;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    ul {
      li {
        display: inline-block;
        a {
          padding: 0 20px;
        }
      }
      .line {
        display: inline-block;
        height: 10px;
        width: 1px;
        background-color: #e2e2e2;
        vertical-align: middle;
        margin: 0 20px;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      .layui-icon-search {
        margin-right: 10px;
        &:hover {
          color: #5fb878;
          cursor: pointer;
        }
      }
    }
  }
</style>
